<template>
  <el-dialog :modelValue="show" title="订单详情" :close-on-click-modal="false" :close-on-press-escape="false"
    @close="onHideDetails">
    <div class="dialogMaxHeight">
      <div class="flex marginB10" v-for="(item,index) in data.fields" :key="index">
        <p class="width110">{{ item.label }}：</p>
        <p>
          <span v-if="item.label == '订单编号'">【<span class="mustPass">{{ item.value }}</span>】</span>
          <span v-if="item.label == '创建时间'">{{ setTimestampTime(item.value) }}</span>
          <span v-if="item.label == '牌局编号'">{{ item.value }}</span>
          <span v-if="item.label == '商户昵称'">{{ selectToLabel(indexStore.agentArray, item.value) }}</span>
          <span v-if="item.label == '游戏'">{{  selectToLabel(indexStore.gameArray, item.value) }}</span>
          <span v-if="item.label == '游戏类型'"><el-tag type="primary">{{ selectToLabel(GAMETYPE, item.value) }}</el-tag></span>
          <span v-if="item.label == '订单类型'"><el-tag :type="item.value == 1 ? 'success' : 'danger'">{{ selectToLabel(ACTIONTYPE, item.value)}}</el-tag></span>
          <span v-if="item.label == '订单状态'"><el-tag :type="item.value == 1 ? 'success' : props.checkedItem.msgId == 10001 ? 'warning':'danger'">{{ props.checkedItem.msgId==10001 ? '警告' : selectToLabel(ORDERSTATE, item.value) }}</el-tag></span>
          <span v-if="item.label == '原因'" class="colorRed">{{ selectToLabel(OrderMessage, item.value) }}</span>
        </p>
      </div>
      <p>数据请求：</p>
      <div class="paddingLR20" v-if="props.checkedItem.wallet_type!=2">
        <p class="paddingL20 flex marginT10"><p class="width110 ">状态码：</p> {{ data.dataInfo.status_code }}</p>
        <p class="paddingL20 flex"><p class="width110 ">请求路径：</p>{{ data.dataInfo.req?.url }}</p>
        <p class="paddingL20 flex"><p class="width110 ">请求方式：</p>{{ data.dataInfo.req?.method }}</p>
        <p class="paddingL20 flexWrap"><p class="width110 ">返回值：</p> {{ data.dataInfo.rsp }}</p>
        <p class="paddingL20 flexWrap"><p class="width120 ">请求参数：</p>{{ JSON.stringify(data.dataInfo.req?.param) }}</p>
      </div>
      <div class="paddingLR20" v-else>
        <p class="paddingL20 flex marginT10"><p class="width110 ">状态码：</p> {{ data.dataInfo.rsp.status }}</p>
        <p class="paddingL20 flex" v-if="data.dataInfo.rsp.status!=50007"><p class="width110">变更前：</p>{{ BigWan(data.dataInfo.rsp?.before) }}</p>
        <p class="paddingL20 flex" v-if="data.dataInfo.rsp.status!=50007"><p class="width110">变更后：</p>{{ BigWan(data.dataInfo.rsp?.after) }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue'
import { setTimestampTime } from '@/utils/time'
import { GAMETYPE, ACTIONTYPE, ORDERSTATE, GAMEICON, OrderMessage } from '@/config/eunm'
import { selectToLabel } from '@/utils/index'
import { BigWan } from '@/utils/math'
import { useStore } from '@/stores/index'
const indexStore = useStore()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
watch(
  () => props.checkedItem,
  async (value) => {
    if (value) {
      setData()
    }
  }
)

// 数据
const data = reactive({
  fields: [
    { label: '订单编号', prop: 'order_id', value:0 },
    { label: '创建时间', prop: 'created_time_stamp', value:0 },
    { label: '牌局编号', prop: 'round_id_str', value:0 },
    { label: '商户昵称', prop: 'agent_id', value:0 },
    { label: '游戏', prop: 'game_id', value:0 },
    { label: '游戏类型', prop: 'game_type', value:0 },
    { label: '订单类型', prop: 'action_type', value:0 },
    { label: '订单状态', prop: 'state', value:0 },
    { label: '原因', prop: 'msgId', value:0 },
  ],
  dataInfo:{} as any
})

// 处理数据
const setData = async () => {
  let keys=Object.keys(props.checkedItem);
  console.log('订单详情',props.checkedItem);
  data.dataInfo = JSON.parse(props.checkedItem.err_desc)
  data.fields.forEach((item:any)=>{
    keys.forEach((key:string)=>{
      if(key == item.prop){
        item.value = props.checkedItem[key]
      }
    })
  })
}

const emit = defineEmits(['onHideDetails'])
// 取消
const onHideDetails = async () => {
  emit('onHideDetails', false)
}
</script>

<style lang="scss" scoped>
.paddingL20{
  display: flex;
  margin-bottom: 10px;
}
</style>
